<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格的增删改查</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./main.js"></script>
  </head>
  <body>
    <article id="app">
      <form class="top">
        <label>
          <span>标题:</span>
          <input
            type="text"
            placeholder="标题"
            v-model="additem.title"
            required
          />
        </label>
        <label>
          <span>发布人:</span>
          <input
            type="text"
            placeholder="发布人"
            v-model="additem.person"
            required
          />
        </label>
        <label>
          <span>日期:</span>
          <input type="date" placeholder="年 /月/日" v-model="additem.date" />
        </label>
        <button @click="add">提交</button>
        <!-- <div class="test">123</div>
        <div class="test">123</div>
        <div class="test">123</div> -->
      </form>
      <div class="main">
        <table>
          <thead>
            <tr>
              <th class="id">序号</th>
              <th class="title">标题</th>
              <th class="person">发布人</th>
              <th class="time">发布时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in item" :key="item.key">
              <td>{{item.id}}</td>
              <td>{{item.title}}</td>
              <td>{{item.person}}</td>
              <td>{{item.date}}</td>
              <td>
                <span @click="del(index)">删除</span
                ><span @click="showdialog(index)">编辑</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="flag" class="dialogbg">
        <div class="dialog">
          <h2>编辑</h2>
          <div class="itemmsg">
            <input type="text" v-model="editmsg.id" />
            <input type="text" v-model="editmsg.title" />
            <input type="text" v-model="editmsg.person" />
            <input type="date" v-model="editmsg.date" />
            <div class="btns">
              <button @click="update">更新</button
              ><button @click="flag = false">取消</button>
            </div>
          </div>
        </div>
      </div>
    </article>
  </body>
</html>
